<script setup lang="ts">
import { useUserStore } from '@/stores'
import { reactive } from 'vue'

// 获取用户信息
const userStore = useUserStore()

const propsOptions = reactive({
  loadStatus: 'more',
  currentPage: 1,
  pageSize: 10,
  list: [
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
  ],
})
</script>

<template>
  <view class="profile-bg"></view>
  <!-- 个人资料 -->
  <view class="profile">
    <!-- 情况1：已登录 -->
    <view class="overview" v-if="userStore.userinfo">
      <navigator url="/pagesMember/profile/profile" hover-class="none">
        <image
          class="avatar"
          :src="userStore.userinfo.avatar || '@/static/images/saluting_face_flat.png'"
          mode="aspectFill"
        ></image>
      </navigator>
      <view class="meta">
        <view class="nickname">
          {{ userStore.userinfo.nickname }}
        </view>
        <navigator class="extra" url="/pagesMember/profile/profile" hover-class="none">
          <text class="update">更新头像昵称</text>
        </navigator>
      </view>
    </view>
    <!-- 情况2：未登录 -->
    <view class="overview" v-else>
      <navigator url="/pages/login/login" hover-class="none">
        <image
          class="avatar gray"
          mode="aspectFill"
          src="@/static/images/saluting_face_flat.png"
        ></image>
      </navigator>
      <view class="meta">
        <navigator url="/pages/login/login" hover-class="none" class="nickname"> 未登录</navigator>
        <view class="extra">
          <text class="tips">点击登录账号</text>
        </view>
      </view>
    </view>
  </view>
  <view class="history">
    <view class="historicalViewing">
      <view class="historicalViewing-title">
        <text class="historicalViewing-title-text">历史观看</text>
        <navigator
          url="/pages/history/history"
          open-type="switchTab"
          hover-class="none"
          class="icon-right"
        >
          <text class="historicalViewing-title-icon"></text>
        </navigator>
      </view>
      <view class="historicalViewing-item-list">
        <view
          class="historicalViewing-item"
          v-for="(item, index) in propsOptions.list"
          :key="index"
        >
          <image class="historicalViewing-item-image" :src="item.image" mode="aspectFill"></image>
          <view class="historicalViewing-item-text">
            {{ item.title }}
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="help">
    <view class="help-list">
      <view class="help-item">
        <view class="help-item-title">
          <text class="icon-help color-red"></text>
          <text class="help-item-title-text">帮助中心</text>
        </view>
        <view class="icon-right"></view>
      </view>
      <view class="help-item">
        <view class="help-item-title">
          <text class="icon-preview color-red"></text>
          <text class="help-item-title-text">问题反馈</text>
        </view>
        <view class="icon-right"></view>
      </view>
      <view class="help-item">
        <view class="help-item-title">
          <text class="icon-phone color-red"></text>
          <text class="help-item-title-text">联系我们</text>
        </view>
        <view class="icon-right"></view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.profile-bg {
  position: fixed;
  // #ifdef MP-WEIXIN
  top: 0;
  // #endif
  left: 0;
  z-index: 0;
  width: 100%;
  height: 300rpx;
  background: linear-gradient(to bottom, #f1dade 10%, #ffffff 80%);
}

.viewport {
  height: 100%;
  background: transparent;
}

/* 用户信息 */
.profile {
  margin-top: 30rpx;
  position: relative;

  .overview {
    display: flex;
    height: 120rpx;
    padding: 0 36rpx;
    color: #444;
  }

  .avatar {
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    border: 5rpx solid #fff;
  }

  .meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 30rpx;
    padding: 16rpx 0;
    margin-left: 20rpx;
  }

  .nickname {
    max-width: 280rpx;
    margin-bottom: 16rpx;
    font-size: 30rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .extra {
    display: flex;
    font-size: 20rpx;
  }

  .tips {
    font-size: 22rpx;
    color: #999;
  }

  .update {
    padding: 3rpx 10rpx 1rpx;
    color: #666;
    font-size: 22rpx;
    border: 1rpx solid #666;
    margin-right: 10rpx;
    border-radius: 30rpx;
  }

  .settings {
    position: absolute;
    bottom: 0;
    right: 40rpx;
    font-size: 30rpx;
    color: #fff;
  }
}

.history {
  margin-top: 60rpx;
  padding: 30rpx 30rpx 20rpx 30rpx;

  .historicalViewing {
    position: relative;
    background-color: #fff;
    color: #333;
    border-radius: 20rpx;
    height: 300rpx;
    box-shadow: 0 0 5rpx #e8e8e8;

    .historicalViewing-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 20rpx 10rpx 20rpx;
      color: #444;
      font-size: 28rpx;
    }

    .historicalViewing-item-list {
      display: flex;
      align-items: center;
      overflow-x: auto;

      .historicalViewing-item {
        padding: 20rpx;

        .historicalViewing-item-image {
          width: 250rpx;
          height: 150rpx;
          border-radius: 10rpx;
        }

        .historicalViewing-item-text {
          width: 250rpx;
          white-space: nowrap; /* 不换行 */
          overflow: hidden; /* 隐藏超出的内容 */
          text-overflow: ellipsis; /* 显示省略标记(...) */
          font-size: 24rpx;
          color: #333;
          padding-top: 10rpx;
        }
      }
    }
  }
}

.help {
  padding: 0 30rpx;

  .help-list {
    position: relative;
    background-color: #fff;
    color: #333;
    border-radius: 20rpx;
    height: 300rpx;
    box-shadow: 0 0 5rpx #e8e8e8;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .help-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 20rpx;
      color: #444;
      font-size: 28rpx;

      .color-red {
        color: indianred;
      }

      .help-item-title-text {
        margin-left: 15rpx;
      }
    }
  }
}
</style>
